<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首页</title>
		<meta name="viewport" content="width=640,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../css/common/animate.css"/>
		<link rel="stylesheet" href="../css/index.css" />
		<link rel="stylesheet" href="../css/writing.css" />
	</head>
	<body>
		<!--*******首页**********-->
		<div class="web_wrap">
			<div class="index_web">
				<!--滚动的彩纸-->
				<div class="scroll_bg">
					<img  src="../images/qr_bg.png"/>
					<img  src="../images/qr_bg.png"/>
				</div>
				<!--内容部分-->
				<div class="content">
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=0 class="guang_card" src="../images/guang_card.jpg"/>
						<!--<img class= "hongbao_front" src="../images/hongbao_front.png"/>-->
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=1 class="guang_card" src="../images/zhou_card.jpg"/>
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=2 class="guang_card" src="../images/guo_card.jpg"/>
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=3 class="guang_card" src="../images/nian_card.jpg"/>
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=4 class="guang_card" src="../images/hua1_card.jpg"/>
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=5 class="guang_card" src="../images/cheng_card.jpg"/>
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=6 class="guang_card" src="../images/kan_card.jpg"/>
					</div>
					<div class="hb_list">
						<img class="close" src="../images/hongbao_close.png"/>
						<img data-id=7 class="guang_card" src="../images/hua2_card.jpg"/>
					</div>
				</div>
				<div class="footer">
					<div class="btn">
						<img class="animated tada infinite" src="../images/index_btn_text.png"/>
					</div>
				</div>
			</div>
		</div>
		<!--*************书写页面*********************-->
		<div class="web_wrap writing_web_wrap">
			<div class="writing_web">
				<div id="bg_mask"></div>
				<!--主要绘制区域-->
				<div class="main_text">
					<img id="zi_bg" src="../images/guang_ori.png"/>
					<div id="wipe"></div>
				</div>
				<!--底部按钮-->
				<div class="btns">
					
					<div class="btn">
						<img class="yanhua"  src="../images/yanhua.png"/>
						<img src="../images/writing_btn1.png"/>
					</div>
					<div class="btn">
						<img class="yanhua"  src="../images/yanhua.png"/>
						<img src="../images/writing_btn2.png"/>
					</div>
					<div class="btn">
						<img class="yanhua"  src="../images/yanhua.png"/>
						<img src="../images/writing_btn3.png"/>
					</div>
				</div>
				<!--开始绘画前的遮罩-->
				<div class="mask">
					<!--手指动画-->
					<div class="pointer">
						<div class="pointer_circle toScale"></div>
						<div class="pointer_circle toScale"></div>
						<div class="pointer_circle"></div>
						<img src="../images/mask_pointer.png"/>
						<img src="../images/mask_text.png"/>
					</div>
					<div class="waiting">分数计算中,请稍后...</div>
				</div>
			</div>
		</div>
		
		
		
		
		
		
		
		<script type="text/javascript">
			var curIndex;	//用户选择的场景
			var userScore;	//用户写字分数
			
			var textArr = [
				["../images/guang_ori.png",'../images/guang_bg.jpg','../images/canvas/zi1.png'],
				["../images/zhou_ori.png",'../images/zhou_bg.jpg','../images/canvas/zi2.png'],
				["../images/guo_ori.png",'../images/guo_bg.jpg','../images/canvas/zi3.png'],
				["../images/nian_ori.png",'../images/nian_bg.jpg','../images/canvas/zi4.png'],
				["../images/hua1_ori.png",'../images/hua1_bg.jpg','../images/canvas/zi5.png'],
				["../images/cheng_ori.png",'../images/cheng_bg.jpg','../images/canvas/zi6.png'],
				["../images/kan_ori.png",'../images/kan_bg.jpg','../images/canvas/zi7.png'],
				["../images/hua2_ori.png",'../images/hua2_bg.jpg','../images/canvas/zi8.png']
			]
		</script>
		
		
		<script src="../js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/TweenMax.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/index.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/writing.js" type="text/javascript" charset="utf-8"></script>
		
		
		<!--宝哥哥代码 START-->
		<style type="text/css">
			img{
				pointer-events:none;
			}
			.writing_web .main_text{
				z-index: 0;
			}
			#wipe {
				position: absolute;
				width: 580px;
				height:580px;
	            top:130px;
				left: 30px;
	            z-index: 2;
			}
			#bg_mask{
				position: absolute;
				background: #000000;
				opacity: .6;
				z-index: 0;
				width: 100%;
				height: 100%;
				-webkit-transition: all 2000ms linear;
				transition: all 2000ms linear;
			}
			.writing_web .btns{
				z-index: 4;
			}
		</style>
		<script src="../js/bgg_wipe2.js"></script>
		<script type="text/javascript">
			document.addEventListener("touchmove",function(e){
				e.preventDefault();
			},false)
			var bg_mask = $("#bg_mask");
			var wipeWrap = $("#wipe");
			var bg_mask_opacity;
			var t;
			var wipe;
			var userScore=0;
			function startT(){
				t =setInterval(function(){
					bg_mask_opacity -=.015;
					bg_mask.css("opacity",bg_mask_opacity);
//					console.log(bg_mask_opacity);
				},100)
			};
			function endT(){
				clearInterval(t);
			}
			//初始化canvas
			function initCanvas(index){
				userScore = 0;//初始化分数
				bg_mask_opacity = .8;//初始化背景亮度
				bg_mask.css("opacity",bg_mask_opacity);
				if(t){
					clearInterval(t);
				}
				t=0;
				wipe=null;
				wipe = new Wipe({
					el: '#wipe',
					fg: textArr[index][2],
					size: 50,
					debug: false,
					imgWidth:580,
					imgHeight:580,
			        lineMax : 60,		//笔画最大粗
				    lineMin : 20, 		//笔画最小粗
					color: "rgba(34,23,20,1)",//笔触颜色，褐色
					autoWipe: false,
					data: null,
					onswiping: function (percent) {
	//							console.log(percent);
					}
				})
				wipe.lineMax = 70;  
				wipe.lineMin = 30;  
				wipe.linePressure = 2.5;  
				wipe.smoothness = 100; 
				
				
				$(".writing_web .btns .btn").eq(0).on("touchstart",function(){
					alert(wipe.getPercent());
					clearInterval(t);
					wipe.saveImg();
				})
				$(".writing_web .btns .btn").eq(1).on("touchstart",function(){
					wipe.clear();
				})
				
				//把按钮重新显示出来
				$(".beforeWri").show();
				$(".afterWri").hide();
				
				//把文字背景重新显示出来
				$("#zi_bg").show();
			}
			
			
		</script>
		<!--宝哥哥代码 END-->
	</body>
</html>
